<template>
  <div class="carousel">
  	<p>推荐使用修改图片尺寸为 750px*320px</p>
  	<!--<div style="margin: 20px;">
  		<span class="eg">轮播列表内部链接示例：homepage/homepage</span>
  	</div>-->
  	<div class="carousel-img">
  		<div v-for="(item,index) in imgList">
	    	<h3>第
	    		<span v-if="index==0">一</span>
	    		<span v-if="index==1">二</span>
	    		<span v-if="index==2">三</span>
	    		<span v-if="index==3">四</span>
	    		张
	    	</h3>
	    	<div>
	    		<img :src="item.picUrl"/>
	    	</div>
	    	<button class="Public-btn" @click="modifyImg(index)">修改图片</button>
	    	<p>链接地址</p>
	    	<p><input  class="input" v-model="item.contentUrl" /></p>
	    </div>
  	</div>
    <p class="btn">
    	<button class="Public-btn" @click="save()">保存</button>
    </p>
    <input type="file" accept=".png,.jpg" id="xdaTanFileImg" class="upload-img" @change="changeImg()"/>
  </div>
</template>
<script>
	export default {
    name:'carousel',
    data: function(){
      return{
      	/*当前修改的图片index*/
      	currentIndex:"-1",
        imgList:[]
      }
    },
    mounted:function(){
    	this.queryQuestionByType();
    },
    methods:{
    	/*修改图片*/
    	modifyImg:function(index){
    		this.currentIndex=index;
    		$(".upload-img").click();
    	},
    	/*获取图片*/
      changeImg:function(){
     		var picFile = document.getElementById("xdaTanFileImg");
     		var formdata1=new FormData();// 创建form对象
				formdata1.append('file',picFile.files[0]);
				let config = {
				  headers:{'Content-Type':'multipart/form-data'}
				}; 
      	this.$post('/system/uploadFile',formdata1,config)
    		.then(response => {
    			/*未登录重定向*/
          if(response==444){
          	this.$router.push({path: '/login'});
          }else{
          	if (response.resultCode ==0) {
	          this.imgList[this.currentIndex].picUrl=this.prefixUrl+response.resultData;
	          }else{
	          	layer.alert(response.resultMsg);
	          }
          }
         
        }).catch(err => {
          console.log(err);
        })
      	
      },
    	/*获取轮播图片数据*/
    	queryQuestionByType:function(){
    		this.$post(
				 '/system/queryWheelPlantingPhoto',{})
    		.then(response => {
    			/*未登录重定向*/
          if(response==444){
          	this.$router.push({path: '/login'});
          }else{
          	if (response.resultCode ==0) {
	            this.imgList=response.resultData;
	            for(var i=0;i<this.imgList.length;i++){
	            	this.imgList[i].picUrl=this.imgList[i].picUrl;
	            }
	          }else{
	          	layer.alert(response.resultMsg);
	          }
          }
         
        }).catch(err => {
          console.log(err);
        })
    	},
    	/*保存图片*/
    	save:function(){
    		console.log(this.imgList);
    		this.$post(
					'/system/updateWheelPlantingPhoto',this.imgList)
    		.then(response => {
    			/*未登录重定向*/
          if(response==444){
          	this.$router.push({path: '/login'});
          }else{
          	if (response.resultCode ==0) {
	            layer.alert("更新成功");
	          }else{
	          	layer.alert(response.resultMsg);
	          }
          }
         
        }).catch(err => {
          console.log(err);
        })
    	},
    }
    
	}
</script>
<style lang="less" scoped>
	.carousel{
		margin-top: 100px;
		>input{
			display: none;
		}
		>p{
			margin: 20px;
			color: red;
		}
		.btn{
			text-align: center;
			margin-top: 100px;
		}
		.carousel-img{
			>div{
				width: 25%;
				float: left;
				text-align: center;
				>div{
					width: 90%;
					margin: 10px auto;
					>img{
						width: 100%;
					}
				}
				>p{
					text-align: left;
					margin-top: 10px;
					margin-left: 5%;
					>input{
						width: 95%;
					}
				}
			
			}
		}
		
		
	}
</style>